<template>
  <view class="container">

    <view class="top-bar">
      <navigator class="back-btn" @click="goBack">←</navigator>
      <text class="title">探访详情</text>
      <view class="more-btn" @click="showActionSheet">···</view>
    </view>

 
    <scroll-view scroll-y="true" class="content">
     
      <view :class="['status-banner', `status-${appointment.status}`]">
        <text class="status-icon">{{getStatusIcon(appointment.status)}}</text>
        <text class="status-text">{{getStatusText(appointment.status)}}</text>
        <text class="status-desc">{{getStatusDesc(appointment.status)}}</text>
      </view>

      <view class="info-card">
        <view class="card-header">
          <text class="card-title">基本信息</text>
        </view>
        <view class="card-content">
          <view class="info-item">
            <text class="info-label">老人姓名</text>
            <text class="info-value">{{appointment.elderlyName}}</text>
          </view>
          <view class="info-item">
            <text class="info-label">老人年龄</text>
            <text class="info-value">{{appointment.elderlyAge}}岁</text>
          </view>
          <view class="info-item">
            <text class="info-label">联系电话</text>
            <text class="info-value">{{appointment.contactPhone}}</text>
          </view>
          <view class="info-item">
            <text class="info-label">详细地址</text>
            <text class="info-value address">{{appointment.address}}</text>
          </view>
        </view>
      </view>

    
      <view class="info-card">
        <view class="card-header">
          <text class="card-title">探访安排</text>
        </view>
        <view class="card-content">
          <view class="info-item">
            <text class="info-label">探访日期</text>
            <text class="info-value">{{appointment.visitDate}}</text>
          </view>
          <view class="info-item">
            <text class="info-label">探访时间</text>
            <text class="info-value">{{appointment.visitTime}}</text>
          </view>
          <view class="info-item">
            <text class="info-label">探访时长</text>
            <text class="info-value">{{appointment.duration}}小时</text>
          </view>
          <view class="info-item">
            <text class="info-label">预约编号</text>
            <text class="info-value code">{{appointment.orderNo}}</text>
          </view>
          <view class="info-item">
            <text class="info-label">创建时间</text>
            <text class="info-value">{{appointment.createTime}}</text>
          </view>
        </view>
      </view>

      <view class="info-card" v-if="appointment.volunteerName">
        <view class="card-header">
          <text class="card-title">志愿者信息</text>
        </view>
        <view class="card-content">
          <view class="volunteer-profile">
            <image :src="appointment.volunteerAvatar" class="volunteer-avatar"></image>
            <view class="volunteer-info">
              <text class="volunteer-name">{{appointment.volunteerName}}</text>
              <text class="volunteer-tags">
                <text class="tag" v-for="(tag, index) in appointment.volunteerTags" :key="index">{{tag}}</text>
              </text>
              <text class="volunteer-rating">
                <text class="rating-stars">★★★★★</text>
                <text class="rating-score">{{appointment.volunteerRating}}</text>
              </text>
            </view>
          </view>
          <view class="volunteer-stats">
            <view class="stat">
              <text class="stat-number">{{appointment.volunteerCompleted}}</text>
              <text class="stat-label">已完成服务</text>
            </view>
            <view class="stat">
              <text class="stat-number">{{appointment.volunteerRating}}分</text>
              <text class="stat-label">平均评分</text>
            </view>
            <view class="stat">
              <text class="stat-number">{{appointment.volunteerExperience}}</text>
              <text class="stat-label">服务经验(年)</text>
            </view>
          </view>
        </view>
      </view>

    
      <view class="info-card" v-if="appointment.specialNeeds">
        <view class="card-header">
          <text class="card-title">特殊需求</text>
        </view>
        <view class="card-content">
          <text class="special-needs">{{appointment.specialNeeds}}</text>
        </view>
      </view>

    
      <view class="info-card" v-if="appointment.serviceRecord">
        <view class="card-header">
          <text class="card-title">服务记录</text>
        </view>
        <view class="card-content">
          <view class="service-record">
            <text class="record-title">探访内容</text>
            <text class="record-content">{{appointment.serviceRecord.content}}</text>
            
            <text class="record-title">老人状态</text>
            <text class="record-content">{{appointment.serviceRecord.elderlyStatus}}</text>
            
            <text class="record-title">志愿者反馈</text>
            <text class="record-content">{{appointment.serviceRecord.feedback}}</text>
            
            <view class="record-images" v-if="appointment.serviceRecord.images && appointment.serviceRecord.images.length">
              <text class="record-title">现场照片</text>
              <scroll-view scroll-x="true" class="images-scroll">
                <view class="images-list">
                  <image 
                    v-for="(img, index) in appointment.serviceRecord.images" 
                    :key="index" 
                    :src="img" 
                    class="record-image"
                    @click="previewImage(index)"
                  ></image>
                </view>
              </scroll-view>
            </view>
          </view>
        </view>
      </view>

      
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar" v-if="showActions">
      <button v-if="appointment.status === 'pending'" class="action-btn cancel" @click="cancelAppointment">取消预约</button>
      <button v-if="appointment.status === 'confirmed'" class="action-btn contact" @click="contactVolunteer">联系志愿者</button>
      
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      appointment: {
        id: 1,
        elderlyName: '李奶奶',
        elderlyAge: 78,
        contactPhone: '138****1234',
        address: '幸福小区3栋2单元501室',
        visitDate: '2023-11-20',
        visitTime: '14:00-16:00',
        duration: 2,
        orderNo: 'VF20231120001',
        createTime: '2023-11-15 10:30:25',
        status: 'completed',
        volunteerName: '张志愿者',
        volunteerAvatar: '/static/images/volunteers/avatar1.jpg',
        volunteerTags: ['有医护经验', '耐心细致', '本地人'],
        volunteerRating: 4.8,
        volunteerCompleted: 32,
        volunteerExperience: 3,
        specialNeeds: '老人腿脚不便，需要协助上下楼梯。有轻微听力障碍，请志愿者说话声音稍大一些。',
        serviceRecord: {
          content: '陪伴老人聊天，协助下楼散步，检查家中安全隐患，帮助整理药品。',
          elderlyStatus: '精神状态良好，能够进行简单交流，对志愿者服务表示满意。',
          feedback: '老人很健谈，对社区活动很感兴趣。建议可以多参与社区老年人活动。',
          images: [
            '/static/images/service/record1.jpg',
            '/static/images/service/record2.jpg',
            '/static/images/service/record3.jpg'
          ]
        },
        feeInfo: {
          baseFee: 100,
          extraFee: 20,
          totalFee: 120,
          paid: true,
          payTime: '2023-11-20 16:30:15'
        },
        evaluated: true
      }
    }
  },
  computed: {
    showActions() {
      // 根据状态显示不同的操作按钮
      return this.appointment.status !== 'cancelled'
    }
  },
  onLoad(options) {
    if (options.id) {
      // 根据ID加载预约详情数据
      this.loadAppointmentDetail(options.id)
    }
  },
  methods: {
    goBack() {
      uni.navigateTo({
      	url:"/pages/regularUser/quickFuction/appointList/appointList"
      })
    },
    showActionSheet() {
      uni.showActionSheet({
        itemList: ['分享预约', '投诉建议', '联系客服'],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              this.shareAppointment()
              break
            case 1:
              this.complainSuggestion()
              break
            case 2:
              this.contactCustomerService()
              break
          }
        }
      })
    },
    loadAppointmentDetail(id) {
      // 实际应用中这里应该调用API获取详情
      console.log('加载预约详情:', id)
    },
    getStatusIcon(status) {
      const iconMap = {
        'pending': '⏳',
        'confirmed': '✅',
        'in_progress': '🚗',
        'completed': '🎉',
        'cancelled': '❌'
      }
      return iconMap[status] || '📝'
    },
    getStatusText(status) {
      const statusMap = {
        'pending': '待确认',
        'confirmed': '已确认',
        'in_progress': '进行中',
        'completed': '已完成',
        'cancelled': '已取消'
      }
      return statusMap[status] || '未知状态'
    },
    getStatusDesc(status) {
      const descMap = {
        'pending': '等待志愿者确认接单',
        'confirmed': '志愿者已确认，将按时上门',
        'in_progress': '志愿者正在服务中',
        'completed': '服务已完成，感谢您的信任',
        'cancelled': '预约已取消'
      }
      return descMap[status] || ''
    },
    previewImage(index) {
      const images = this.appointment.serviceRecord.images
      uni.previewImage({
        current: images[index],
        urls: images
      })
    },
    cancelAppointment() {
      uni.showModal({
        title: '确认取消',
        content: `确定要取消${this.appointment.elderlyName}的探访预约吗？`,
        success: (res) => {
          if (res.confirm) {
            // 调用取消预约API
            uni.showToast({
              title: '预约已取消',
              icon: 'success'
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          }
        }
      })
    },
    contactVolunteer() {
      uni.navigateTo({
        url: `/pages/regularUser/chat/chat?volunteerId=${this.appointment.volunteerId}&volunteerName=${this.appointment.volunteerName}`
      })
    },
    payFee() {
      uni.showModal({
        title: '确认支付',
        content: `确认支付¥${this.appointment.feeInfo.totalFee}吗？`,
        success: (res) => {
          if (res.confirm) {
            // 调用支付API
            uni.showToast({
              title: '支付成功',
              icon: 'success'
            })
            this.appointment.feeInfo.paid = true
          }
        }
      })
    },
    evaluateService() {
      uni.navigateTo({
        url: `/pages/regularUser/evaluate/evaluate?appointmentId=${this.appointment.id}`
      })
    },
    shareAppointment() {
      uni.showToast({
        title: '分享功能开发中',
        icon: 'none'
      })
    },
    complainSuggestion() {
      uni.navigateTo({
        url: '/pages/regularUser/complain/complain'
      })
    },
    contactCustomerService() {
      uni.makePhoneCall({
        phoneNumber: '400-123-4567'
      })
    }
  }
}
</script>

<style>
page {
  background-color: #f8f8f8;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f8f8;
}

.top-bar {
  padding: 15px 20px;
  background-color: #FD995E;
  display: flex;
  align-items: center;
  height: 60px;
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(255, 87, 34, 0.2);
}

.back-btn {
  font-size: 24px;
  color: white;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.2);
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: white;
  text-align: center;
  flex: 1;
}

.more-btn {
  color: white;
  font-size: 20px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.2);
}

/* 内容区域 */
.content {
  flex: 1;
  padding: 15px;
  box-sizing: border-box;
}

/* 状态横幅 */
.status-banner {
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 15px;
  text-align: center;
  color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.status-pending {
  background: linear-gradient(135deg, #ffb74d 0%, #ff9800 100%);
}

.status-confirmed {
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
}

.status-in_progress {
  background: linear-gradient(135deg,#ffef0a 0%, #ffef0a 100%);
}

.status-completed {
  background: linear-gradient(135deg, #FD995E 0%, #FD995E 100%);
}

.status-cancelled {
  background: linear-gradient(135deg, #9e9e9e 0%, #757575 100%);
}

.status-icon {
  display: block;
  font-size: 40px;
  margin-bottom: 8px;
}

.status-text {
  display: block;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.status-desc {
  display: block;
  font-size: 14px;
  opacity: 0.9;
}

/* 信息卡片 */
.info-card {
  background-color: white;
  border-radius: 12px;
  padding: 0;
  margin-bottom: 15px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  overflow: hidden;
}

.card-header {
  padding: 15px 20px;
  background-color: #fff8e1;
  border-bottom: 1px solid #ffecb3;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #ff9800;
}

.card-content {
  padding: 20px;
}

/* 信息项 */
.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 14px;
  color: #666;
  width: 80px;
  flex-shrink: 0;
}

.info-value {
  font-size: 14px;
  color: #333;
  flex: 1;
  text-align: right;
}

.address {
  color: #888;
  font-size: 13px;
}

.code {
  font-family: monospace;
  font-weight: bold;
  color: #ff5722;
}

/* 志愿者信息 */
.volunteer-profile {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.volunteer-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
  border: 2px solid #ffcc80;
}

.volunteer-info {
  flex: 1;
}

.volunteer-name {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.volunteer-tags {
  display: block;
  margin-bottom: 5px;
}

.tag {
  display: inline-block;
  font-size: 11px;
  color: #ff9800;
  background-color: #fff3e0;
  padding: 2px 6px;
  border-radius: 8px;
  margin-right: 5px;
}

.volunteer-rating {
  display: flex;
  align-items: center;
}

.rating-stars {
  color: #ffc107;
  font-size: 14px;
  margin-right: 5px;
}

.rating-score {
  font-size: 13px;
  color: #666;
}

.volunteer-stats {
  display: flex;
  justify-content: space-around;
  padding: 15px 0;
  border-top: 1px solid #f0f0f0;
}

.stat {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #ff5722;
  margin-bottom: 3px;
}

.stat-label {
  display: block;
  font-size: 12px;
  color: #999;
}

/* 特殊需求 */
.special-needs {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

/* 服务记录 */
.service-record {
  font-size: 14px;
  color: #333;
}

.record-title {
  display: block;
  font-weight: bold;
  color: #ff9800;
  margin: 10px 0 5px;
}

.record-title:first-child {
  margin-top: 0;
}

.record-content {
  display: block;
  line-height: 1.6;
  margin-bottom: 15px;
}

.images-scroll {
  white-space: nowrap;
  margin-top: 10px;
}

.images-list {
  display: flex;
}

.record-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  margin-right: 10px;
}

/* 费用信息 */
.fee-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #f0f0f0;
}

.fee-item:last-child {
  border-bottom: none;
}

.fee-item.total {
  border-top: 1px solid #ffcc80;
  border-bottom: none;
  padding-top: 10px;
  margin-top: 5px;
}

.fee-label {
  font-size: 14px;
  color: #666;
}

.fee-value {
  font-size: 14px;
  color: #333;
}

.total-price {
  font-size: 18px;
  font-weight: bold;
  color: #ff5722;
}

.payment-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.payment-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
}

.payment-badge.paid {
  background-color: #e8f5e9;
  color: #4caf50;
}

.payment-badge.unpaid {
  background-color: #ffebee;
  color: #f44336;
}

.payment-time {
  font-size: 12px;
  color: #999;
}

/* 底部操作栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px 20px;
  background-color: white;
  border-top: 1px solid #f0f0f0;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
  display: flex;
  gap: 10px;
}

.action-btn {
  flex: 1;
  height: 44px;
  border: none;
  border-radius: 22px;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s;
}

.action-btn:active {
  transform: scale(0.98);
}

.action-btn.cancel {
  background-color: #ffebee;
  color: #f44336;
}

.action-btn.contact {
  background-color: #e3f2fd;
  color: #2196f3;
}

.action-btn.pay {
  background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 87, 34, 0.3);
}

.action-btn.evaluate {
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}
</style>